<template>
  <div class="sidebar-content">
    <div
      class="sidebar-type "
      v-for="(item, index) in tags"
      :key="index"
      @click="sel(index)"
    >
      <div class="icon" v-if="item.show">
        <img src="../assets/imgs/border.png" />
      </div>
      <div class="redIcon" v-if="item.isRed"></div>
      <div class="sidebar-text ">{{ item.name }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "sidebar",
  // props: ["tags"],
  props: {
    defaultIndex: {
      type: Number,
    },
    tags:{
      type:Array
    }
  },
  mounted() {
    this.getRem(1920, 100);
  },

  data() {
    return {};
  },
  created() {
    for (let i of this.tags.keys()) {
      this.$set(this.tags[i], "show", false);
      this.tags[this._props.defaultIndex].show = true;
    }
  },
  methods: {
    sel(index) {
      for (let i of this.tags.keys()) {
        this.$set(this.tags[i], "show", false);
        this.tags[i].show = false;
        if (index == i) {
          this.tags[i].show = true;
        }
      }
      this.$emit("conIndex", index);
      console.log(this.tags);
    },
  },
};
</script>

<style scoped>
.sidebar-content {
  width: 2.62rem;
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  border-radius: 0.05rem;
  align-self: start;
}
.sidebar-content .sidebar-type {
  height: 0.54rem;
  align-items: center;
  font-size: 0.14rem;
  display: flex;
  font-family: PingFang SC;
  background: rgba(255, 255, 255, 1);
  font-weight: 400;
  color: rgba(48, 48, 48, 1);
  opacity: 1;
  position: relative;
  border-bottom: 0.01rem solid #f5f5f5;
}
img {
  width: 100%;
  height: 100%;
  display: block;
}
.redIcon{
  width: 0.07rem;
  height: 0.07rem;
  border-radius: 50%;
  background: red;
  position: absolute;
  left: 0.2rem;
}
.sidebar-content .sidebar-text {
  width: 100%;
  height: 0.32rem;
  display: flex;
  align-items: center;
  padding-left: 0.32rem;
  box-sizing: border-box;
  cursor: pointer;
}
.icon {
  width: 0.04rem;
  height: 0.32rem;
  position: absolute;
  left: 0;
}
</style>
